<template>
  <div id="app">
    <!-- 头部 -->
    <HeaderVue></HeaderVue>
    <div class="bodys">
      <!-- 左侧 -->
      <div class="left">
        <LeftVue></LeftVue>
      </div>
      <!-- 右侧 -->
      <div class="mian">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import HeaderVue from "@/components/Header"
import LeftVue from "@/components/Left"
import {mapState,mapMutations} from "vuex"
export default {
  name: 'App',
  components: {
    HeaderVue,LeftVue
  },
  computed:{
    ...mapState(["adminInfo"])
  },
  created(){
  },
  methods:{
    ...mapMutations(['updateAdminInfo']),
    // 检测登录
    async check(){
      let {data} = await this.$axios.post("/admin/administrators/check")
      if(data.code === 4){
        this.$message.warning(data.mes)
        this.$router.replace("/login")
        return
      }
      if(data.code) {
        this.$router.replace("/login")
        return
      }
      this.updateAdminInfo(data.data)
    }
  },
  created(){
    // 检测是否登录
    this.check()
  }
}
</script>

<style lang="less" scoped>
@import "assets/css/reset.css";
@import "assets/css/iconfont.css";
::-webkit-scrollbar {/*滚动条整体样式*/
  width: 0px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: rgba(0,167,232,.3);
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: #EDEDED;
}
#app{
  width: 100%;
  height: 650px;
  background-color: #FCFCFC;
  .bodys{
    width: 100%;
    height: 100%;
    display: flex;
    .left{
      max-width: 200px;
      overflow-y: auto;
      height: 100%;
    }
    .mian{
      flex: 1;
      padding: 20px;
      height: 610px;
      overflow-y: scroll;
      background-color: #FCFCFC;
    }
  }
}
</style>
